import React from 'react'
import {
  Alert, Button, Form, Input,
} from 'antd'
import { connect } from '@umijs/max'
// import http from 'common/utils/axios.jsx'
// import api from 'common/utils/api.jsx'
// import JSEncrypt from 'common/utils/JSEncrypt.js'

const { location } = window
const FormItem = Form.Item

@connect(({ test }) => ({ ...test }))
class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isExistence: true,
      errUserVal: null,
      showPassVisibilityBtn: true,
      imgurl: '',
    }
    this.back = location.hash.split('=')[1]
  }

  handleSubmit = (e) => {
    const backUrl = decodeURIComponent(this.back)
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const password = values.password
        const username = values.username
        this.login({
          username,
          // password: JSEncrypt(password),
          password,
          code: values.code,
        }).then((res) => {
          if (res.status === 1) {
            if (this.back) {
              window.location = backUrl
            } else {
              window.location = 'managerial#/'
            }
            this.setState({
              isExistence: true,
            })
          } else if (res.status === 5) {
            this.setState({
              // imgurl: `${getKaptcha}?t=${Math.random()}`,
              errUserVal: (
                <span>
                  无权进入数据集成引擎，请到
                  <a
                    href={`http://www${process.env.NODE_ENV == 'production' ? '' : '.test'}.xuelangyun.com/tml/dataAsset`}
                  >
                    雪浪云官网
                  </a>
                  申请试用
                </span>
              ),
              isExistence: false,
            })
          } else {
            // this.setState({
            //   imgurl: `${getKaptcha}?t=${Math.random()}`,
            //   errUserVal: res.msg,
            //   isExistence: false,
            // })
          }
        })
      } else {
        this.setState({
          errUserVal: '请输入密码',
        })
      }
    })
  };

  // async login(data) {
  //   const res = await http.post('authLogin', data, {
  //     json: true,
  //   })
  //   return res
  // }

  render() {
    const { getFieldDecorator } = this.props.form
    const { showPassVisibilityBtn } = this.state
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        {this.state.isExistence ? null : (
          <Alert message={this.state.errUserVal} type="error" />
        )}
        <FormItem>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名' }],
          })(<Input placeholder="邮箱/用户名/手机号" />)}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input.Password
              placeholder="登录密码"
              visibilityToggle={showPassVisibilityBtn}
            />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('code', {
            rules: [{ required: true, message: '请输入验证码' }],
          })(
            <div>
              <Input className="code" placeholder="验证码" />
              <img
                onClick={this.getKaptcha.bind(this)}
                src={this.state.imgurl}
              />
            </div>,
          )}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </FormItem>
      </Form>
    )
  }
}
// const WrappedNormalLoginForm = Form.create()(NormalLoginForm)
export default NormalLoginForm
